<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看收费</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">

</head>
<style>

    .top_class {
        width: 600px;
        padding-left: 65px;
    }

    .top_nei_class {
        width: 49%;
        float: left;
    }

    .top_nei_class_right {
        width: 49%;
        float: right;
    }

    .class_label {
        padding-left: 0px;
        text-align: left;
    }

    .div_class {
        width: 250px !important;
    }

    .zhouqi_div_left_class, .zhouqi_div_right_class {
        width: 115px;

    }

    .zhouqi_div_right_class {
        margin-left: 15px;
    }

    .layui-field-title {
        width: 650px !important;
    }

    .class_textarea_form {
        width: 93%;
        float: left;
    }

    .class_textarea {
        margin-left: 0px;
    }

    .layui-form-label {
        width: 100px !important;
    }

    .col_class {
        width: 150px !important;
    }

    .class_table {
        width: 560px;
        margin-left: 63px;
    }

    .upload_class {
        margin-top: 10px;
    }

    .btn_save_class {
        margin-top: 5rem;
    }

    .class_btn_fh {
        margin-left: 9rem;
    }

    .layui-upload-list {
        width: 560px;
    }

    .tr_class {
        height: 60px;
    }

    .img_class_name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;
        height: 80px;
        line-height: 80px !important;
        display: block;

    }
</style>

<body>

<div style="padding: 20px; position: relative;">


    <form class="layui-form" action="">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>基本信息</legend>
        </fieldset>
        <input type="hidden" name="BILL_ID"/>

        <div class="top_class">
            <div class="top_nei_class">
                <label class="layui-form-label  class_label">借款方名称</label>
                <div class="layui-form-item div_class">
                    <div class="layui-input-inline div_class">
                        <input type="text" name="COMPANY_NAME" lay-verify="title" autocomplete="off" placeholder="借款方名称"
                               class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="top_nei_class_right">
                <label class="layui-form-label class_label">签订人</label>
                <div class="layui-form-item div_class">

                    <div class="layui-input-inline div_class">
                        <input type="text" name="SIGNER" placeholder="签订人" autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="top_nei_class">
                <label class="layui-form-label  class_label">账单周期</label>
                <div class="layui-inline div_class">
                    <div class="layui-input-inline zhouqi_div_left_class">
                        <input type="text" name="START_DATE" class="layui-input" readonly>
                    </div>
                    <div class="layui-input-inline zhouqi_div_right_class">
                        <input type="text" name="END_DATE" class="layui-input" readonly>
                    </div>
                </div>
            </div>


            <div class="top_nei_class top_nei_class_right">
                <label class="layui-form-label class_label">应付日期</label>
                <div class="layui-form-item div_class">

                    <div class="layui-input-inline div_class">
                        <input type="text" name="PAY_DATE" class="layui-input" placeholder="应付日期" readonly>
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>费用信息</legend>
        </fieldset>

        <div>
            <div class="layui-form">
                <table class="layui-table class_table">
                    <colgroup>
                        <col class="col_class">
                        <col class="col_class">
                        <col class="col_class">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>费用名称</th>
                        <th>应还款金额(元)</th>
                        <th>实还款金额(元)</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr class="tr_class">
                        <td>利息</td>
                        <td class="lx_price_class"></td>
                        <td class="lx_price_class"></td>
                        <!--<td><input type="text" name="price_shi" class="layui-input" maxlength="10"
                                   oninput="ssPrice(this)"></td>-->

                    </tr>
                    <tr class="tr_class znj_class" style="display: none">
                        <td>滞纳金</td>
                        <td class="zn_price_class"></td>
                        <td class="zn_price_class"></td>

                    </tr>
                    <tr class="tr_class">
                        <td>费用小计</td>
                        <td class="xj_ying_price_class"></td>
                        <td class="xj_price_class"></td>

                    </tr>
                    </tbody>
                </table>
            </div>

        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>交易明细</legend>
        </fieldset>

        <div>
            <div class="layui-form">
                <table class="layui-table class_table">
                    <colgroup>
                        <col class="">
                        <col class="">
                        <col class="">
                        <col class="">
                        <col class="">
                        <col class="">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>操作时间</th>
                        <th>操作人</th>
                        <th>支付流水号</th>
                        <th>实际还款日期</th>
                        <th>还款金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="tr_class">
                        <td class="class_create_date"></td>
                        <td class="class_name"></td>
                        <td class="class_pay_transaction"></td>
                        <td class="class_act_pay_date"></td>
                        <td class="class_pay_price"></td>

                    </tr>

                    </tbody>
                </table>
            </div>

        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>其他关键信息</legend>
        </fieldset>

        <div class="top_class">
            <div class="upload_class">

                <div class="layui-upload">

                    <div class="layui-upload-list">
                        <table class="layui-table">

                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th></th>



                            </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                            <!--<tbody id="demoList"></tbody>-->
                        </table>
                    </div>
                </div>

            </div>


        </div>

        <div class="layui-form-item  btn_save_class">
            <div class="layui-input-block">
                <button class="layui-btn class_btn_fh layui-btn-warm" type="button" onclick="revert(this)">取消</button>
            </div>
        </div>
    </form>

</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../../static/js/common/dateUtils.js"></script>
<script type="text/javascript" src="../../../static/js/common/queryUtils.js"></script>
<script>
    var table;
    var businessId = "";
    var laydate = "";
    var id = "";
    var type = "";
    var upload = "";
    var price_type = "";
    var uploadfiles = new Array(); // 要上传的文件列表路径
    var laytpl = "";
    layui.use(['jquery', 'table', 'form', 'layer', 'element', 'laydate', 'upload', 'laytpl'], function () {
        table = layui.table;
        var $ = layui.jquery,
            element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
            form = layui.form,
            upload = layui.upload;
        laydate = layui.laydate;
        laytpl = layui.laytpl;


        laydate.render({
            elem: '#ACT_PAY_DATE'//指定元素
            , format: 'yyyy-mm-dd'
        });
        debugger
        $("#ACT_PAY_DATE").val(DateUtils.formatDate(new Date(), 'yyyy-mm-dd'));

        id = QueryUtils.GetQueryString("id");
        type = QueryUtils.GetQueryString("type");

        //多文件上传
        uploadList(upload);
        showData(id);

        //回显数据
        function showData(id) {
            $.ajax({
                url: "/financial/findShowPrice",
                data: {id: id},
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    debugger
                    if (res.errcode == '0') {
                        var data = res.data;
                        /* res.COMPANY_NAME;  // 借款方名称
                         res.SIGNER;  // 签订人姓名
                         res.START_DATE;  // 开始时间
                         res.END_DATE;  // 结束时间
                         res.PAY_DATE;  // 付款时间

                         res.TOTAL_PRICE;  // 应付金额*/

                        $("input[name='BILL_ID']").val(data.id);// 账单id
                        $("input[name='COMPANY_NAME']").val(data.COMPANY_NAME);// 借款方名称
                        $("input[name='SIGNER']").val(data.SIGNER);// 签订人姓名
                        $("input[name='COMPANY_NAME']").val(data.COMPANY_NAME);// 借款方名称
                        $("input[name='START_DATE']").val(data.START_DATE);// 开始时间
                        $("input[name='END_DATE']").val(data.END_DATE);// 结束时间
                        $("input[name='PAY_DATE']").val(data.PAY_DATE);// 付款时间
                        $("input[name='price_shi']").val(data.TOTAL_PRICE);// 实收
                        $("input[name='PAY_PRICE']").val(data.XJ_TOTAL_PRICE);// 实收
                        $(".lx_price_class").html(data.TOTAL_PRICE);// 应收
                        $(".zn_price_class").html(data.ZN_TOTAL_PRICE);// 滞纳金
                        $(".xj_price_class").html(data.XJ_TOTAL_PRICE);// 小计  实收
                        $(".xj_ying_price_class").html(data.XJ_TOTAL_PRICE);// 小计  应收


                        $(".class_create_date").html(data.CREATE_DATE);// 操作时间
                        $(".class_name").html(data.NAME);//操作人
                        $(".class_price_type").html(data.PRICE_TYPE);//收款类型
                        $(".class_pay_transaction").html(data.PAY_TRANSACTION);// 支付流水号
                        $(".class_act_pay_date").html(data.ACT_PAY_DATE);// 实际支付日期
                        $(".class_pay_price").html(data.PAY_PRICE);// 实际支付收款金额


                        price_type = data.price_type;
                        if (data.price_type == "2") {
                            $(".znj_class").hide();
                        } else {
                            $(".znj_class").show();
                        }


                        var getTpl = $("#demoList_templ").html();
                        var view = document.getElementById('demoList');
                        laytpl(getTpl).render(data, function (html) {
                            view.innerHTML = html;
                        });

                    } else {

                    }
                }
            });
        }


    });

    function revert() {

        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭

    }

    //联动
    function ssPrice(the) {
        var zn_price_val = $(".zn_price_class").html();
        var zn_price = 0;
        if (zn_price_val != "") {
            zn_price = zn_price_val;
        }
        $(".xj_price_class").html(parseInt($(the).val()) + parseInt(zn_price));
        $("input[name='PAY_PRICE']").val(parseInt($(the).val()) + parseInt(zn_price));// 实收/
    }

    //多文件上传
    function uploadList(upload) {

        //多文件列表示例
        var files;
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/servlet/UploadHandleServlet'
            // ,accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></td>'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                        return false;
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.errcode == 0) { //上传成功
                    var obj = {};
                    obj.name = res.data.fileName;
                    obj.size = res.data.fileSize;
                    obj.ext = res.data.extName;
                    obj.url = res.data.fileUrl;
                    uploadfiles.push(obj);
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html(''); //清空操作
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


    }


</script>

<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
<!--<script type="text/javascript" src="../../../static/js/common/imgVideo.js"></script>-->

<script id="demoList_templ" type="text/html">

    {{#  layui.each(d.Imgs, function(index, item){ }}
    <tr>
        <td>{{item.NAME}}</td>
        <td  style="text-align: center;"><a href="{{item.PATH}}" download="{{item.NAME}}" style="color: royalblue">下载</a></td>


    </tr>
    {{#  }); }}


</script>
</body>

</html>